<template>
    <div class="container">
        <div class="row">
            <div class="col-3">
                <div class="card" style="margin-top:20px;">
                    <div class="card-body">
                        <img :src="$store.state.user.photo" alt="" style="width:100%">
                    </div>
                </div>
            </div>

            <div class="col-9">
                <div class="card" style="margin-top:20px;">
                    <div class="card-header">
                        <span style="font-size: x-large;">我的bot</span>
                        <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal"
                            data-bs-target="#add-bot">创建bot</button>
                    </div>
                    <div class="card-body">
                        <table class="table table-striped table-hover">
                            <thead>
                                <tr>
                                    <th>名称</th>
                                    <th>创建时间</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="bot in bots" :key="bot.id">
                                    <td>{{ bot.title }}</td>
                                    <td>{{ bot.createtime }}</td>
                                    <td>
                                        <button type="button" class="btn btn-secondary" style="margin-right: 10px;"
                                            data-bs-toggle="modal" :data-bs-target="'#modify-bot-' + bot.id">修改</button>
                                        <button type="button" class="btn btn-danger" data-bs-toggle="modal"
                                            data-bs-target="#delete-bot" @click="delete_bot_pre(bot)">删除</button>


                                        <!-- 修改的modal -->
                                        <div class="modal fade" :id="'modify-bot-' + bot.id" data-bs-backdrop="static"
                                            data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel"
                                            aria-hidden="true">
                                            <div class="modal-dialog modal-xl">
                                                <div class="modal-content">
                                                    <div class="modal-header">
                                                        <h1 class="modal-title fs-5" id="staticBackdropLabel">修改bot</h1>
                                                        <button type="button" class="btn-close" data-bs-dismiss="modal"
                                                            aria-label="Close"></button>
                                                    </div>
                                                    <div class="modal-body">
                                                        <form>
                                                            <div class="mb-3">
                                                                <label for="modify-bot-title"
                                                                    class="form-label">名称</label>
                                                                <input v-model="bot.title" type="text"
                                                                    class="form-control" id="modify-bot-title"
                                                                    placeholder="请输入bot的名称">
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="modify-bot-description"
                                                                    class="form-label">简介</label>
                                                                <textarea v-model="bot.description" class="form-control"
                                                                    id="modify-bot-description" placeholder="请介绍一下这个bot"
                                                                    rows="3"></textarea>
                                                            </div>
                                                            <div class="mb-3">
                                                                <label for="modify-bot-code"
                                                                    class="form-label">代码</label>
                                                                <VAceEditor v-model:value="bot.content"
                                                                    @init="editorInit" lang="c_cpp" theme="textmate"
                                                                    style="height: 400px" />
                                                            </div>
                                                        </form>
                                                    </div>
                                                    <div class="modal-footer">
                                                        <div class="error-message">{{ modify_message }}</div>
                                                        <button type="button" class="btn btn-secondary"
                                                            data-bs-dismiss="modal" @click="refresh_bots">关闭</button>
                                                        <button type="button" class="btn btn-primary"
                                                            @click="modify_bot(bot)">修改</button>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- modal -->
    <div class="modal fade" id="add-bot" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog modal-xl">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">创建bot</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="mb-3">
                            <label for="add-bot-title" class="form-label">名称</label>
                            <input v-model="botadd.title" type="text" class="form-control" id="add-bot-title"
                                placeholder="请输入bot的名称">
                        </div>
                        <div class="mb-3">
                            <label for="add-bot-description" class="form-label">简介</label>
                            <textarea v-model="botadd.description" class="form-control" id="add-bot-description"
                                placeholder="请介绍一下这个bot" rows="3"></textarea>
                        </div>
                        <div class="mb-3">
                            <label for="add-bot-code" class="form-label">代码</label>
                            <VAceEditor v-model:value="botadd.content" @init="editorInit" lang="c_cpp" theme="textmate"
                                style="height: 400px" />
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <div class="error-message">{{ botadd.msg }}</div>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" @click="add_bot">创建</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 删除的modal -->
    <div class="modal fade" id="delete-bot" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="staticBackdropLabel">提示</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"
                        @click="refresh_bots"></button>
                </div>
                <div class="modal-body">
                    您确定要删除吗?
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal"
                        @click="refresh_bots">关闭</button>
                    <button type="button" class="btn btn-primary" @click="delete_bot">删除</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref, reactive } from 'vue';
import $ from 'jquery';
import { useStore } from 'vuex';
import { Modal } from 'bootstrap/dist/js/bootstrap';
import { VAceEditor } from 'vue3-ace-editor';
import ace from 'ace-builds';


export default {
    components: {
        VAceEditor
    },
    setup() {
        ace.config.set(
            "basePath",
            "https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")

        const store = useStore();
        let bots = ref([]);
        let bot_to_remove = ref('')

        const botadd = reactive({
            title: "",
            description: "",
            content: "",
            msg: "",
        })

        const refresh_bots = () => {
            $.ajax({
                url: "http://123.60.185.149:8100/user/bot/getlist",
                type: "post",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                success(resp) {
                    bots.value = resp;
                }
            })
        }
        refresh_bots();

        const add_bot = () => {
            botadd.msg = "";
            $.ajax({
                url: "http://123.60.185.149:8100/user/bot/add",
                type: "post",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                data: {
                    title: botadd.title,
                    description: botadd.description,
                    content: botadd.content,
                },
                success(resp) {
                    if (resp.msg === "success") {
                        botadd.title = "";
                        botadd.description = "";
                        botadd.content = "";
                        Modal.getInstance("#add-bot").hide();
                        refresh_bots();
                    } else {
                        botadd.msg = resp.msg;
                    }
                }
            })
        }

        const delete_bot_pre = (bot) => {
            bot_to_remove = ref(bot);
        }

        const delete_bot = () => {
            $.ajax({
                url: "http://123.60.185.149:8100/user/bot/remove",
                type: "post",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                data: {
                    id: bot_to_remove.value.id,
                },
                success(resp) {
                    console.log(resp);
                    if (resp.msg === "success") {
                        refresh_bots();
                        Modal.getInstance("#delete-bot").hide();
                    } else {
                        alert(resp.msg);
                    }
                }
            })
        }

        let modify_message = ref('');
        const modify_bot = (bot) => {
            botadd.msg = "";
            $.ajax({
                url: "http://123.60.185.149:8100/user/bot/update",
                type: "post",
                headers: {
                    Authorization: "Bearer " + store.state.user.token,
                },
                data: {
                    id: bot.id,
                    title: bot.title,
                    description: bot.description,
                    content: bot.content,
                },
                success(resp) {
                    if (resp.msg === "success") {
                        Modal.getInstance("#modify-bot-" + bot.id).hide();
                        refresh_bots();
                    } else {
                        modify_message.value = resp.msg;
                    }
                }
            })
        }

        return {
            bots,
            botadd,
            modify_message,
            add_bot,
            refresh_bots,
            delete_bot_pre,
            delete_bot,
            modify_bot
        }
    }
}
</script>

<style scoped>
div.error-message {
    color: red;
}
</style>